<template>
  <div class="edu-form-input" :style="style">
    <el-input
      v-model="current_field"
      clearable
      :minlength="$util.getDefValue(current_args.minlength, null)"
      :maxlength="$util.getDefValue(current_args.maxlength, null)"
      :disabled="disabledValue"
      :[icon_postion]="icon"
      :show-word-limit="wordLimitValue"
      :placeholder="$util.getDefValue(current_args.placeholder, '')"
    >
      <template v-if="current_args.slot" :slot="$util.getDefValue(current_args.slot_postion, 'append')">
        {{ current_args.slot }}
      </template>
    </el-input>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    args: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      current_field: this.value,
      current_args: this.args
    };
  },
  computed: {
    disabledValue() {
      if (this.current_args.disabled == '1') {
        return true;
      }

      return null;
    },
    icon_postion() {
      if (this.current_args.icon) {
        const _prefix = this.$util.getDefValue(this.current_args.icon_postion, 'prefix');

        return _prefix + '-icon';
      }
      return null;
    },
    icon() {
      return this.current_args.icon ? this.current_args.icon : null;
    },
    wordLimitValue() {
      if (this.current_args.maxlength) {
        return true;
      }

      return null;
    },
    style() {
      return this.current_args.css ? this.current_args.css : {};
    }
  },
  watch: {
    current_field(value) {
      this.$emit('update:value', value);
    },
    value: {
      handler(now, old) {
        this.current_field = now;
      }
    }
  }
};
</script>
<style scoped>
.edu-form-input {
  max-width: 600px;
}
</style>
